<template>
    <div class="container">
        <div style="height: 5%"></div>
        <!-- 标题区域 -->
        <div class="title-container">
            <h1 class="blog-title" id="blogTitle"></h1>
            <div style="margin-top: 5px;">
                <el-text class="blog-info" id="blogInfo" />
                <span>&nbsp;
                    <el-button text disabled>
                        <el-icon>
                            <CaretTop class="subscribe" />
                        </el-icon>
                    </el-button>
                </span>
                <span>
                    <el-text id="like-count"></el-text>
                </span>
            </div>
        </div>
        <!-- 正文内容 -->
        <div class="blog-context" id="blogContent" />
        <el-divider />
        <!-- 评论区 -->
        <div class="comment-container">
            <h3 class="blog-title">评论</h3>
            <div id="comment-section">
                <!-- 根据每条评论生成一个评论和回复区域 -->
                <div v-for="(comment, index) in comments" :key="index" class="comment">
                    <div class="comment-header">
                        <img :src="comment.avatar" />
                        <span class="comment-name">&nbsp;{{ comment.name }}</span>
                        <span class="comment-time">&nbsp;{{ formatTime(comment.date) }}</span>
                        <span class="like-count">&nbsp;<el-button text disabled>
                                <el-icon>
                                    <CaretTop class="subscribe" />
                                </el-icon>
                            </el-button>{{ comment.likes }}
                        </span>
                        <span class="button-delete">
                            <el-popconfirm title="确定要删除这条评论?" cancel-button-text="取消" confirm-button-text="确认"
                                @confirm="deleteComment(index)">
                                <template #reference>
                                    <el-button text type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </span>
                    </div>
                    <div class="comment-content">
                        {{ comment.content }}
                    </div>
                    <!-- 回复区 -->
                    <div v-if="comment.replies" class="replies">
                        <div v-for="(reply, replyIndex) in comment.replies" :key="replyIndex" class="reply">
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <img :src="reply.avatar" class="User Avatar" />
                            <span class="reply-name">&nbsp;{{ reply.name }}</span>
                            <span class="reply-to">&nbsp;回复@{{ reply.replyto }}</span>
                            <span class="reply-time">&nbsp;{{ formatTime(reply.time) }}</span>
                            <span class="reply-likes">&nbsp;
                                <el-button text disabled>
                                    <el-icon>
                                        <CaretTop class="subscribe" />
                                    </el-icon>
                                </el-button>
                                {{ reply.likes }}
                            </span>
                            <span class="button-delete">
                                <el-popconfirm title="确认要删除这条回复?" cancel-button-text="取消" confirm-button-text="确认"
                                    @confirm="deleteReply(index,replyIndex)">
                                    <template #reference>
                                        <el-button text type="danger">删除
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </span>
                            <div>
                                <span class="reply-content">&nbsp;&nbsp;&nbsp;&nbsp;{{ reply.content }}</span>
                            </div>
                        </div>
                    </div>
                    <el-divider style="margin-top: 10px; margin-bottom: 0px;" />
                </div>
            </div>
        </div>


    </div>
</template>

<script lang="ts" setup>
    import {
        linkEmits
    } from 'element-plus';
    import {
        CaretTop,
        Star,
    } from '@element-plus/icons-vue';
    import {
        ref,
        warn,
        ElMessage
    } from 'vue';
    import {
        showBlogContent,
        getBlogComment,
        getReply,
        getUserById,
        deletesComment,
        deletesReply,
    } from '@/api/index';

    function getUrlParam(key: string) {

        // 获取地址栏上"?"问号及后面的参数
        let search = window.location.search.substring(1);
        console.log('search：', search);

        // 将url参数转为url对象
        let urlsp = new URLSearchParams(search);
        console.log('URLSearchParams', urlsp);

        // 根所传入的key返回对应的参数值
        return urlsp.get(key);
    }

    let nickname = localStorage.getItem("nickname");
    let comments = ref([]);
    const userId = localStorage.getItem("userId");

    showBlogContent(getUrlParam('id')).then(
        res => {
            document.getElementById("blogTitle").textContent = res.data.title;
            document.getElementById("blogContent").textContent = res.data.content;
            let author = '';
            getUserById(res.data.bloggerId).then(
                rq => {
                    author = rq.data.nickname;
                    document.getElementById("blogInfo").innerHTML = "作者：" + author + "&nbsp&nbsp创建时间:" + res
                        .data.date;
                }
            )
            document.getElementById("like-count").textContent = res.data.likes;
        }
    )


    getBlogComment(getUrlParam('id')).then(
        res => {
            comments.value = res.data;
            if (comments.value != null) {
                comments.value.replies = [];
                for (let i = 0; i < comments.value.length; i++) {
                    console.log(comments.value[i].commentatorId);
                    getUserById(comments.value[i].commentatorId).then(
                        res => {
                            comments.value[i].name = res.data.nickname;
                        }
                    )
                    getReply(comments.value[i].id).then(
                        res => {

                            comments.value[i].replies = res.data;
                            if (comments.value[i].replies != null) {
                                for (let j = 0; j < comments.value[i].replies.length; j++) {
                                    getUserById(comments.value[i].replies[j].replierId).then(
                                        res => {
                                            comments.value[i].replies[j].name = res.data.nickname;
                                        }
                                    )
                                    getUserById(comments.value[i].replies[j].replyTo).then(
                                        res => {
                                            comments.value[i].replies[j].replyto = res.data.nickname;
                                        }
                                    )
                                }
                            }

                        }
                    )
                }
            }
        }
    )



    // 格式化时间戳为可读的日期时间字符串
    const formatTime = (timestamp: number) => {
        // 这里可以使用日期库如 date-fns 或 moment.js 来格式化时间
        const date = new Date(timestamp);
        return date.toLocaleString();
    };

    const deleteComment = (index: number) => {
        // 删除评论逻辑
        deletesComment(comments.value[index].id).then(
            res => {
                comments.value.splice(index, 1);
            }
        )
    };

    const deleteReply = (index: number, replyIndex: number) => {
        // 删除评论逻辑
        deletesReply(comments.value[index].replies[replyIndex].id).then(
            res => {
                comments.value[index].replies.splice(replyIndex, 1);
            }
        )
    };
</script>

<style scoped>
    .container {
        width: 100%;
        height: 789px;
    }

    .title-container {
        width: 50%;
        height: 10%;
        margin-left: 20%;
    }

    .blog-title {
        margin: 0px;
    }

    .blog-context {
        width: 60%;
        height: auto;
        min-height: 60%;
        margin-left: 20%;
        text-align: justify;
        text-justify: inter-word;
        white-space: pre-wrap;
    }

    .comment-container {
        width: 60%;
        height: auto;
        min-height: 30%;
        background-color: lightgoldenrodyellow;
        margin-top: 15px;
        margin-left: 20%;
    }

    .subscribe:active {
        color: lightblue;
    }

    .comment {
        margin-top: 10px;
    }
</style>